<div class="content-wrapper" id="rule">
    <div>
        <div>
            <h3 style="display: inline-block">支持的模板</h3>
            <span>
                <a href="${ctx}rule/addPage">
                    <el-button type="primary" plain>添加模板</el-button>
                </a>
            </span>
        </div>
        <el-row>
            <el-col :span="3" v-for="(o, index) in dataList" >
                <el-card :body-style="{ padding: '0px'}" shadow="hover">
                    <div @click="openBigPic(o.templateName)">
                       <img :src="'http://47.105.197.249:8888/base-site/templatePic/'+o.templateName+'.jpg'"   class="image">
                    </div>
                    <div style="padding: 14px;height: 90px;">
                        <p class="overflow" :title="o.templateName" v-text="o.templateName"></p>
                        <div >
                            <div style="height: 16px;">
                                <p style="width: 140px;font-size: 12px;color: #5f5f5f;"  class="overflow" :title="o.templateDesc" v-text="o.templateDesc"></p>
                            </div>
                            <div style="display:flex; flex-direction: row-reverse">
                                <el-button @click="del(o.id)" style="margin-left: 10px;" type="primary" icon="el-icon-delete" circle></el-button>
                                <el-button @click="update(o.id)" type="danger" icon="el-icon-edit" circle></el-button>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>

    <el-dialog
            title="查看大图"
            :visible.sync="dialogVisible"
            width="80%"
            >
        <img  :src="templatePic" >
    </el-dialog>
</div>
<link rel="stylesheet" href="${ctx}/bower_components/vue/css/element-ui.css">
<script src="${ctx}/bower_components/vue/js/vue.min.js"></script>
<script src="${ctx}/bower_components/vue/js/element-ui.js"></script>
<script src="${ctx}/bower_components/vue/js/axios.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el: '#rule',
        data:{
            dataList: [],
            dialogVisible: false,
            templatePic:''
        },
        created:function () {
            this.getlist();
        },
        methods:{
            getlist(){
                axios.post('${ctx}/rule/search', {
                }).then(function (response) {
                    vm.dataList=response.data.data.content;
                })
            },
            openBigPic(templateName){
                vm.templatePic="http://47.105.197.249:8888/base-site/templatePic/"+templateName+".jpg";
                vm.dialogVisible = true
            },
            del(id){
                this.$confirm('确定删除该模板么, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('${ctx}/rule/'+id, {
                    }).then(function (response) {
                        if (response.data.code=20000) {
                            vm.$message({
                                message: '删除模板成功',
                                type: 'success'
                            });
                            vm.getlist()
                        }else{
                            vm.$message.error('删除模板失败');
                        }
                    })
                });

            },
            update(id){
                window.location.href='${ctx}/rule/updatePage/'+id;
            }
        }
    })
</script>
<style>
    .el-row > .el-col{
        margin: 10px;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 150px;
        height: 100px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .el-button.is-circle{
        padding: 2px;
    }
    .overflow{overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}

</style>
